import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import HotKeys from '../../utils/HotKeys';
import classNames from 'classnames';
/**
 * 按钮组件
 * button 默认高度 30px 几种标准 20px 30px 40px 50px
 */
export default class Button extends Component{
	
	static propTypes = {
		value: PropTypes.string,
		type: PropTypes.oneOf(['default', 'primary', 
				'danger', 'warning', 'success', 'info', 'inverse']),  //定义几种常规颜色 
		icon: PropTypes.string,
		link: PropTypes.string,
		size: PropTypes.oneOf(['xl', 'lg', 'df', 'sm']),
		onClick: PropTypes.func,
		disabled: PropTypes.bool,
		iconAlign: PropTypes.oneOf(['left', 'right']), //图标方向
		hotKey: PropTypes.string,   //快捷键
		plain: PropTypes.bool  //背景透明
	}

	static defaultProps = {
		type: 'default',
		size: 'df',
		iconAlign: 'left',
		plain: false
	}

	constructor(props){
		super(props);
		let {value, disabled} = this.props;
		this.state = { value, disabled };
	}

	onClick = (e)=> {
		let {onClick, link, hotKey} = this.props;
		if(onClick){
			onClick(e);
		}else if(link){
			window.open(link, '_blank');
		}
	}

	componentDidMount(){
		let {hotKey} = this.props;
		if(hotKey){
			HotKeys.add('Ctrl+' + hotKey, this.onClick);
		}
	}

	componentWillUnmount(){
		//清理快捷键事件
		let {hotKey} = this.props;
		if(hotKey){
			HotKeys.remove('Ctrl+' + hotKey);
		}
	}


	render(){
		let {type, icon, size, iconAlign, plain} = this.props,
			{value, disabled} = this.state;
		let btnCls = classNames({
			'rd-btn': true,
			'rd-btn-disabled': disabled,
			'rd-btn-plain': plain, 
			['rd-btn-' + size]: size && size != 'df',
			['rd-btn-' + type]: !disabled && type && type != 'default'
		});

		return (
			<button ref='btn' className={btnCls} onClick={disabled ? null : this.onClick}>
				{icon && iconAlign == 'left' 
					? <i className={`fa fa-${icon}`} /> : null}
				{value ? <span>{value}</span>: null}
				{icon && iconAlign == 'right' 
					? <i className={`fa fa-${icon}`} /> : null}
			</button>
		)
	}
}